<template>
 <div>
     <h2>我是子组件</h2>
     {{msg}}
     {{str}}
     <h3>{{msgFather}}</h3>
     <h3>{{num}}</h3>
     <h3>obj:{{obj}}</h3>
     <hr>
     <button @click="update">点击修改</button>
 </div>
</template>

<script>
export default {
    // props属性
    // 1.基本的数组写法
    // props:['msg','str','msgFather'],
    // 2.对象写法,类型校验错误不会影响使用
    // props:{
    //     // 属性名:属性的数据类型
    //     msg:String,
    //     str:String,
    //     msgFather:Number
    // },
    // 3.最复杂写法
    props:{
        msg:{
            type:String,
            // 默认值，当没有传入的时候会生效
            default(){
                return '888'
            }
        },
        str:{
            type:String,
            default(){
                return '888'
            }
        },
        msgFather:{
            type:String,
            default(){
                return '888'
            }
        },
        num:{
            type:Number,
            // 系统自动传入参数，代表传入的值
            // 自定义校验，如果返回true代表校验通过，false代表不通过
            validator(val){
                if(val>10) {
                    return true
                } else {
                    return false
                }
            }
        },
        obj:{
            type:Object
        }
    },
    data(){
         return{}
    },
    created(){},
    methods:{
        update(){
            // console.log(this.msgFather)
            // this.msgFather = '哈哈哈哈'
            this.obj.name = '李四'
        }
    },
    components:{}
}

</script>
<style scoped>
</style>